* { font-family: Tahoma, Arial, Helvetica; } html { overflow-y: scroll; } body { background: #ffffff; background-repeat: no-repeat; -o-background-size:99% auto; -webkit-background-size:99% auto; -moz-background-size:99% auto; background-size:99% auto; margin: 0px 0px 10px 0px; padding: 0px; font-size: 14px; } mg { padding: 1px 1px 1px 1px; background: #ffffff; } #banner { width: 450px; padding-top: 40px; margin-left: 0px; } #logo { background: url(/img/artikelen/base/logo.png) no-repeat; background-size: 100% auto; max-width: 320px; height: 110px; padding-top: 0px; margin-right: 0px; margin-top: 5px; margin-left: 0px; } .bannertekst { padding-top: 0px; margin-right: 0px; margin-top: 0px; /* margin-left: 400px; */ height: auto; width: 98vw; /* position: absolute; */ /* overflow: hidden;*/ } .bannertekst img { float: right; margin-left: 20px; } @media (max-width: 1090px) { .bannertekst { display: none; } } a, a * { color: #450356; text-decoration: underline; } a:hover, a:hover * { color: #64628A; } #pagina { position: left; border: 0px solid #000000; color: #464646; margin-left: 10px; margin-right: 20px; margin-top: 5px; /* width: 1000px; */ } #header { margin-top: 0px; margin-left: -27px; margin-right: 0px; padding-left: 0px; padding-right: 0px; } #bc { color: #6D6E71; font-size: 10px; margin-left: 5px; margin-top: 0px; } #bc a { color: #6D6E71; } #lang { color: #6D6E71; font-size: 10px; float: right; margin-top: -5px; margin-right: 10px; display:block; z-index: 2000; position: relative; } #content table.tlayout { width: 99%; margin: 0 auto; } #content table.tlayout tr td{ vertical-align: top; } #content h1 { color: #0014E9; border: 0px solid #505050; margin: -15px 0px 6px -3px; padding-left: 0px; font-size: 56px; text-transform: uppercase; margin-bottom:3px; } .artikeltitel { color: #0014E9; font-weight: bold; text-transform: uppercase; } #footer { padding-left: 0px; padding-right: 0px; /* color: #464646; */ color: #FFFFFF; margin-left: 0px; padding-top: 0px; height: 0px; } @media (max-width: 640px) { #footer { font-size: 3vw; flex-grow: 0; flex-basis: 0; } } #footer a { color: #FA902A; } #footer h3 { color: #0014E9; text-decoration: underline; margin-bottom:3px; } #textover { position: relative; width: 100%; /* for IE 6 */ } /* h2 { position: absolute; top: 150px; left: 0px; width: 100%; } */ .marker { border:1px solid #ccc; padding:5px 10px; display: flex; } .container { display: flex; flex-wrap: wrap; /* Zorg ervoor dat de div's naar de volgende regel gaan bij kleiner scherm */ max-width: 1000px; margin: auto; } .block { /* border-left: 0px solid #505050; border-bottom: 0px solid #505050; background: #ffffff; padding: 3px; margin: 10px 5px 0px 0px; display: inline-table; max-width: 350px; object-fit: contain; border-bottom:0px dashed #b4b4b4; box-shadow: 5px 5px 5px rgb(80, 80, 80); padding: 5px; border-radius: 5px; */ width: 32%; /* Breedte 32% voor schermen groter dan 640px */ padding: 3px; font-weight: 400 !important; /* font-size: 2vw; */ font-size: min(4vw, 16px); margin: 10px 5px 0px 0px; box-sizing: border-box; /* Zorgt ervoor dat padding niet buiten de breedte valt */ flex-grow: 1; flex-basis: 0; transition: flex-basis 0.3s ease; } .block h1 { color: #0014E9; font-size: 1.5em; text-transform: uppercase; margin-bottom:3px; } .block img { width: 100%; /* Zorgt ervoor dat de afbeelding meeschaling met de div */ height: auto; /* Behoudt de verhouding van de afbeelding */ } @media (max-width: 640px) { .block { width: 100%; /* Breedte 100% voor schermen kleiner dan 640px */ font-size: 3vw; flex-grow: 0; flex-basis: 0; } .container { display:block; } } .sticky { position: -webkit-sticky; /* Voor Safari */ position: sticky; top: 0; z-index:1000; width: 105%; } .sticky + .container { padding-top: 463px; }
![]() |